<template>

  <div class="login_container">
    <img src="../assets/logo-treasure.svg" class="img" alt="" />

    <van-cell-group class="login_form">
      <van-field v-model="username" :label-width="50" left-icon="manager" label=" 账号 " clearable :error="isUserError"
        placeholder=" 请输入用户名 " @focus="focusHandle" @keypress.enter="handleRegister" />

      <van-field v-model="password" left-icon="lock" :label-width="50" :error="isPassError" clearable type="password"
        label=" 密码 " placeholder=" 请输入密码 " @focus="focusHandle" @keypress.enter="handleRegister" />

      <van-field v-model="mail" left-icon="envelop-o" :label-width="50"  :error="isMailError" clearable
      label=" 邮箱 " placeholder=" 请输入邮箱 " @focus="focusHandle" @keypress.enter="handleRegister" />
    </van-cell-group>
    <p class="login-no ">
      {{message}}
    </p>
    <van-button class="login_btn" type="primary" :loading="showLoading" loading-type="spinner" block
      :loading-text="loadmessage" @click="handleRegister"> register
    </van-button>
  </div>
</template>
  <script>
import { Toast } from 'vant';
import md5 from 'js-md5';
export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: '注册',
  data() {
    return {
      isMailError:false,
      isUserError: false, // 账号为空时显示
      isPassError: false, // 密码为空时显示
      showLoading: false, // 是否加载 loading
      message: "", // 按钮上的加载
      loadmessage:"",
      username: "", // 账号
      password: "", // 密码
      mail:"",
    };
  },
  beforeDestroy() {
    this.showLoading = false;
    this.loadmessage = "";
  },
  created() {
    this.message = "欢迎注册鲶鱼网";
    },
  methods: {
    focusHandle() {
      this.isUserError = false;
      this.isPassError = false;
      this.isMailError = false;
    },
    handleRegister() {
      if (this.username == "" || this.password == "" || this.mail == "") {
        Toast.fail("请填写所有信息");
      }else{
        let salt =  Math.round(Math.random()*100)  + ""
        this.showLoading = true;
        this.loadmessage = " Registing...";
        this.axios({
        method: "POST",
        url: "/aapi/register",
        data: {
          "username": this.username,
          "password": md5(this.password+salt),
          "mail": this.mail,
          "salt": salt
        }
      }).then(response => {
        if (response.status === 200) {
          setTimeout(() => {
            Toast.success('Register success');
            this.$router.push("/login");
            this.showLoading = false;
          }, 1500);
        }
      })
      .catch((error) =>{
        this.showLoading = false;
        this.loadmessage = "";
        if (error.response.status === 405) {
          this.isUserError = true
          Toast.fail(error.response.data)
          this.message = error.response.data
        } else if (error.response.status === 406) {
          this.isPassError = true
          Toast.fail(error.response.data)
          this.message = error.response.data
        } else if (error.response.status === 408) {
          this.isMailError = true
          Toast.fail(error.response.data)
          this.message = error.response.data
        }
      });
      }
    }
  }
};
</script>

  <style scoped>
  .login_container {
    position: relative;
    padding: 5% 20px;
    display: flex;
    flex-direction: column;
  }
  
  .login_container .img {
  
    width: 130px;
    height: 130px;
    margin: 30px auto;
  
  }
  
  
  .go_register {
    color: #1989fa;
    font-size: 14px;
  
  }
  
  .go_register:first-child {
    margin-right: 10px;
  }
  

  
  
  .login_container .login_btn {
    margin-top: 50px;
  }
  
  .login_container .login_zhe {
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
  
  }
  
  .login_zhe p:first-child {
    font-size: 14px;
  }
  
  .login_zhe p:nth-child(2) {
    color: #888;
  }
  .child-view{
    position: relative;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    transition: all .5s cubic-bezier(.55, 0, .1, 1);
  }
  </style>
